<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>{{title||"个人信息"}}</span>
    </div>
    <div class="demo-image__placeholder">
      <div class="block">
        <el-image :src="src" class="head">
          <div slot="placeholder" class="image-slot">
            加载中<span class="dot">...</span>
          </div>
        </el-image>
      </div>
    </div>
    <div class="text">
      <span style="float: left"><i class="el-icon-s-custom"></i>&nbsp;&nbsp;用户名</span>
      <span style="float: right">{{user.username}}</span>
      <div style="clear: both;"></div>
    </div>
    <div class="text">
      <span style="float: left"><i class="el-icon-user"></i>&nbsp;&nbsp;姓名</span>
      <span style="float: right">{{user.name}}</span>
      <div style="clear: both;"></div>
    </div>
    <div class="text">
      <span style="float: left"><i class="el-icon-male"></i>&nbsp;&nbsp;性别</span>
      <span style="float: right">
                                     <span v-for="item in gender"
                                           v-if="item.valueId===user.gender">
                                    {{item.valueName}}
                                </span>
                            </span>
      <div style="clear: both;"></div>
    </div>
    <div class="text">
      <span style="float: left"><i class="el-icon-phone-outline"></i>&nbsp;&nbsp;手机号码</span>
      <span style="float: right">{{user.phone}}</span>
      <div style="clear: both;"></div>
    </div>
    <div class="text">
      <span style="float: left"><i class="el-icon-s-promotion"></i>&nbsp;&nbsp;身份证号码</span>
      <span style="float: right">{{user.idCard}}</span>
      <div style="clear: both;"></div>
    </div>
    <div class="text">
      <span style="float: left"><i class="el-icon-date"></i>&nbsp;&nbsp;创建日期</span>
      <span style="float: right">{{user.created}}</span>
      <div style="clear: both;"></div>
    </div>
    <div class="text"></div>
  </el-card>
</template>

<script>
    import {queryByTypeCode} from "../../api/dictionary";
    import {getPosition} from "../../api/common";

    export default {
        name: "selfCard",
        props: ["title"],
        data() {
            return {
                src: require("../../assets/user.jpg"),
                user: this.$store.state.user,
                gender: [],
            }
        },
        mounted() {
            this.initDict();
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },
            async initDict() {
                let resp = await queryByTypeCode("gender");
                this.gender = resp.data
            }
        },
        watch: {
            '$store.state.user': function (newVal) {
                if (newVal) {
                    this.user = newVal
                }
            },
        },
    }
</script>

<style scoped lang="scss">
    .text {
      font-family: 华文宋体;
        font-size: 16px;
        font-weight: bold;
        margin: 0;
        padding: 6px 0;
        border-top: 1px solid #e1e1e1;
        line-height: 40px;
    }

    .block {
        text-align: center;
        margin: 5px auto;
        overflow: hidden;
        border-radius: 50%;
        width: 120px;
        height: 100px;
    }

    .head {
        border-radius: 50%;
        overflow: hidden;
        transition: 0.5s;

        &:hover {
            transform: scale(1.3);
        }
    }
</style>